<template>
  <view class="news-list-page">
    <!-- 引入天气预报组件 -->
    <WeatherWidget />
    
    <!-- 原有顶部组件 -->
    <TopNav />
    <UpdateTip />
    
    <view class="page-title">热点新闻列表（多样式）</view>
    <NewsCard 
      v-for="(news, index) in hotNewsList" 
      :key="index" 
      v-bind="news" 
    />
    
    <!-- 广告模块 -->
    <view class="ad-item">
      <image src="/static/ad1.jpg" class="ad-img" mode="aspectFill" />
      <image src="/static/ad2.jpg" class="ad-img" mode="aspectFill" />
      <image src="/static/ad3.jpg" class="ad-img" mode="aspectFill" />
      <view class="ad-label">广告 我主良缘文化</view>
    </view>
    
    <!-- 底部Tab栏 -->
    <BottomTab />
  </view>
</template>

<script setup>
// 导入组件
import WeatherWidget from '@/components/WeatherWidget.vue';
import TopNav from '@/components/TopNav.vue';
import UpdateTip from '@/components/UpdateTip.vue';
import NewsCard from '@/components/NewsCard.vue';
import BottomTab from '@/components/BottomTab.vue';

const hotNewsList = [
  { 
    title: "2020，我们温暖的记忆", 
    source: "新闻联播", 
    time: "2025.10.29", 
    comment: 405, 
    isTop: true 
  },
  { 
    title: "森林大县57年无大火是怎么做到的", 
    source: "光明网", 
    time: "2025.10.28", 
    comment: 234, 
    isTop: true 
  },
  { 
    title: "几年近疯狂，涉案金额超3亿，一个“背包客”牵出全国跨省“倒烟”大案", 
    source: "大河网", 
    time: "2025.10.27", 
    comment: 38, 
    img: "/static/news1.jpg" 
  },
  { 
    title: "中国老年化水平加速，论养老保险在中国的重要性？人们应不应该买保险？", 
    source: "新京报官微", 
    time: "2025.10.26", 
    comment: 58, 
    img: "/static/news2.jpg" 
  },
  { 
    title: "国产大模型“天工”5.0发布，多模态能力突破行业天花板", 
    source: "科技日报", 
    time: "2025.10.29", 
    comment: 23000, 
    isTop: true 
  },
  { 
    title: "全国智慧交通网络覆盖率达92%，出行效率提升40%", 
    source: "央视新闻", 
    time: "2025.10.28", 
    comment: 15000 
  },
  { 
    title: "A股新能源板块单日暴涨8%，机构称“第三增长曲线已明确”", 
    source: "财经网", 
    time: "2025.10.27", 
    comment: 31000, 
    hasSearch: true, 
    tags: ["新能源", "A股行情", "机构评级"] 
  },
  { 
    title: "《敦煌·未来之境》数字艺术展开展，VR技术还原千年壁画", 
    source: "文化周刊", 
    time: "2025.10.26", 
    comment: 8600 
  },
  { 
    title: "全球气候峰会达成历史性协议，多国承诺2035年碳减排50%", 
    source: "国际新闻社", 
    time: "2025.10.25", 
    comment: 42000 
  }
];
</script>

<style scoped>
.news-list-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 30rpx 0;
}
.ad-item {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}
.ad-img {
  width: 32%;
  margin-right: 2%;
  border-radius: 8rpx;
  height: 160rpx;
}
.ad-label {
  width: 100%;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}
</style>